
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>成为会员</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style_vip.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="css/dizist.css">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style1.css" rel="stylesheet">
	<script src="js/vue.js"></script>
	<style>
		.btn_price1{
			cursor: pointer;
		}
	</style>
</head>
<body>
<div id="el">
<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed">
		<!--<a href="javascript:;" class="aui-navBar-item">-->
		<a href="okpage.html" class="aui-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="aui-center">
			<span class="aui-center-title">开通会员</span>
		</div>
		<a href="javascript:;" class="aui-navBar-item" >
			<i class="icon icon-sys"></i>
		</a>
	</header>
	<section class="aui-scrollView">
		<div class="aui-member-head">
			<div class="aui-flex">
				<!--添加用户头像和用户名-->
				<div class="aui-flex-user">
					<img :src="user.headUrl" alt="">
				</div>
				<div class="aui-flex-box aui-flex-box-top">
					<h2><span v-text="user.username"></span> <em>开通会员</em></h2>
				</div>
			</div>
			<div class="aui-member-box">
				<h1>
					<!--<img src="images/title.png" alt="">-->
				</h1>
				<div class="aui-palace">
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-001.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>会员折扣</h2>
							<p>购物多省</p>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-002.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>分享赚双倍</h2>
							<p>购物多省200%</p>
						</div>
					</a>
					<a href="#" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-003.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>每单最高额度</h2>
							<p>购物多省200%</p>
						</div>
					</a>
					<a href="javascript:" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-004.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>客服优先</h2>
						</div>
					</a>
					<a href="javascript:" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-005.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>配送优先</h2>
						</div>
					</a>
					<a href="javascript:" class="aui-palace-grid">
						<div class="aui-palace-grid-icon">
							<img src="images/icon-nav-001.png" alt="">
						</div>
						<div class="aui-palace-grid-text">
							<h2>丢单速赔</h2>
						</div>
					</a>
				</div>

			</div>
		</div>

		<div class="aui-flex">
			<div class="aui-flex-box">
				<h2> <i class="icon icon-member"></i> 购买权益</h2>
			</div>
		</div>
		<div class="aui-flex-member-list">
			<ul class="aui-cho-box">

				<li class="aui-flex" v-for="meal in meals">
					<div class="aui-flex-time">
						<h1 v-text="meal.mealName"></h1>
					</div>
					<div class="aui-flex-box">
						<h2>原价 <em>￥<span v-text="meal.mealMoney*2"></span></em></h2>
					</div>
					<div class="aui-flex-tag">
						<h2><em>特惠</em> <span v-text="meal.mealMoney" class="result_price"></span></h2>
					</div>
					<input type="hidden" :value="meal.mealId">
				</li>
				<!--<li class="aui-flex">
					<div class="aui-flex-time">
						<h1>1个月</h1>
					</div>
					<div class="aui-flex-box">
					</div>
					<div>
						<h2>￥19</h2>
					</div>
				</li>
				<li class="aui-flex">
					<div class="aui-flex-time">
						<h1>试用15天 3单</h1>
					</div>
					<div class="aui-flex-box">
					</div>
					<div>
						<h2>￥5</h2>
					</div>
				</li>-->

			</ul>
			<h3><i class="icon icon-info"></i> 成为会员可享受各大权益</h3>
		</div>
		<div class="aui-member-get">
			<button class="btn_price1" @click="btn_buy()">￥<span id="btn_price"></span> 购买权益</button>
		</div>
		</section>
	</section>
	<div style="height: 50px;"> </div>

	<div class="footnav" style="z-index: 999">
		<div class="col-xs-3 text-center"><a href="/weixin/shoppingMall"><i class="iconfont icon-shop"></i><p>商城</p></a></div>
		<div class="col-xs-3 text-center"><a href="details.html"><i class="iconfont icon-huodongfj"></i><p>关于我们</p></a></div>
		<div class="col-xs-3 text-center"><a href="/weixin/shoppingmall/my-order.html"><i class="iconfont icon-liebiao"></i><p>订单中心</p></a></div>
		<div class="col-xs-3 text-center"><a href="mendian.html"><i class="iconfont icon-dizhi"></i><p>附近门店</p></a></div>
	</div>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	var checked = 0;
	$(document).ready(function(e) {
		/*委托事件让套餐有选中的效果*/
		$(".aui-cho-box").on("click","li",function(){
			$(this).addClass("on").siblings().removeClass("on");
			checked = $(this).children().eq(3).val();
			$("#btn_price").text($(this).children().eq(2).children().eq(0).children().eq(1).text());
			tola();
		});
	});

	function tola() {
		var $li = $(".aui-cho-box").children("li.on");
		var money = $li.children("i").text();
		var count = $(".auiSks").val();
		$(".aui-total span").text(money * count);
	}

	var a=new Vue({
		el:"#el",
		data:{
			meals:[

			],
			user:{
				username:"guoguo",
				headUrl:"",
				userId:"",
			}
		},
		created:function(){
			this.queryMeal();
			this.getUserInfo();
		},
		methods:{
			queryMeal:function(){
				var _this=this;
				$.ajax({
					url:"/weixin/user/queryMeal",
					data:{},
					dataType:"json",
					Type:"get",
					success:function (data) {
						console.log(data);
						if(data.li!=null){
							// console.log(data.li);
							// console.log(data.li[0].mealName);
							for (var i = 0;i<data.li.length;i++){
								_this.meals.push(data.li[i]);
							}
							console.log(_this.meals);
						}
					}
				})
			},
			//购买vip界面获取用户信息
			getUserInfo:function(){
				var _this=this;
				$.ajax({
					url:"/weixin/user/getUserInfo",
					data:{},
					dataType:"json",
					Type:"get",
					success:function (data) {
						console.log(data);
						_this.user.username = data.obj.username;
						_this.user.headUrl = data.obj.headUrl;
						_this.user.userId = data.obj.userId;
					}
				})
			},
			btn_buy:function () {
				if(checked == 0){
					alert("还没有选中项哦~~");
				}else{
					//选中的等级id
					// alert(checked);
					//选中的价格
					// alert($("#btn_price").text());
					//获取套餐和vip信息，存储到mealpay表中
					var num = "";
					$.ajax({
						url:"/weixin/vip/insertMealPay",
						data:{"vip_checked":checked},
						dataType:"json",
						Type:"get",
						success:function (data) {
							num = data.obj;
							// alert(num);
							//付款
							// location.href="http://wchuan.mynatapp.cc/weixin/pay/alixianxiapay.html";
							// location.href="http://wchuan.mynatapp.cc/weixin/alipay2?btnPrice="+$("#btn_price").text()+"&num="+num;
							// location.href= window.location.protocol +"//"+window.location.host+"/weixin/alipay2?btnPrice="+$("#btn_price").text()+"&num="+num;
							// location.href= window.location.protocol +"//"+window.location.host+"/weixin/buyVipPay?Money="+$("#btn_price").text()+"&num="+num;
							//调用支付
							$.ajax({
								url:"/weixin/buyVipPay",
								data:{"Money":$("#btn_price").text(),"num":num},
								dataType:"json",
								Type:"get",
								success:function (data) {

									function onBridgeReady() {
										WeixinJSBridge.invoke(
												'getBrandWCPayRequest', {
													"appId": data.obj.appId,     //公众号名称，由商户传入
													"timeStamp": data.obj.timeStamp,       //时间戳，自1970年以来的秒数
													"nonceStr": data.obj.nonceStr, //随机串
													"package": data.obj.package,
													"signType": "MD5",         //微信签名方式：
													"paySign": data.obj.paySign //微信签名
												},
												function (res) {
													if (res.err_msg == "get_brand_wcpay_request:ok") {
														// 使用以上方式判断前端返回,微信团队郑重提示：
														//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
														window.location.href = "/weixin/queryIndex";
													}
												});
									}

									if (typeof WeixinJSBridge == "undefined") {
										if (document.addEventListener) {
											document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
										} else if (document.attachEvent) {
											document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
											document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
										}
									} else {
										onBridgeReady();
									}

								}
							});
						}
					});




				}
			},
		},
		computed:{
			// vip:function(){
			// 	if(this.user.lvId==1 || this.user.lvId==null ){
			// 		return true;
			// 	}else{
			// 		return false;
			// 	}
			// }
		}
	});


</script>
</html>
